<template>
  <div class="md-pages-index">
    <!-- 第一屏 banner -->
    <div class="md-banner-box">
      <div class="md-banner-bg">
        <md-swiper height="100%" :swiperData="bannerList" />
      </div>
    </div>
    <!-- 加入引导语 -->
    <div class="md-introduce-box" v-if="yindaoImages.length>0">
      <img :src="yindaoImages[0]" alt="banner-bg" @click.stop="handleApplyExperience">
    </div>
    <!-- 商品列表 -->
    <div class="md-goods">
      <ul class="md-goods-info-list">
        <li class="md-goods-info-item" v-for="item in productData" :key="item.productId" @click="productItem(item)">
          <div class="item-block">
            <div class="pic">
              <img :src="JSON.parse(item.picture)[0]" alt="">
            </div>
            <div class="describe-block">
              <h4>{{ item.title }}</h4>
              <p class="desc">{{ item.description }}</p>
              <ul class="g-info">
                <li>{{ item.seliingPrice ? `$${parseFloat(item.seliingPrice || 0).toFixed(2)}` : '--' }}</li>
                <li>stocks:{{ item.quantity ? item.quantity : '--' }}</li>
              </ul>
              <ul class="operate-block">
                <li class="address" @click.stop="clickBuy(item)">Product Purchase Address</li>
                <li class="free-trial" @click.stop="handleApply(item)">Free Trial</li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 申请商品理由 -->
    <md-apply-product-dialog :flag="flag" :dialogInfo="dialogInfo" @close="flag = false"></md-apply-product-dialog>
  </div>
</template>

<script>
export default {
  name: 'MdPagesIndexComponent',
  layout: 'dynamic',
  data () {
    return {
      bannerList: [],
      yindaoImages: [],
      search: {
        title: '',
        category: '1', // 产品类型（1新品 2往期 3体验）
        pageIndex: 1,
        pageSize: 12
      },
      infoLoading: false,
      productData: [],
      productTotal: 0,
      flag: false,
      dialogInfo: {
        userId: '',
        productId: '',
        status: '2' // 待审核
      }
    }
  },
  mounted () {
    this.getProductInfo()
    this.getBannerList()
  },
  methods: {
    async getBannerList () {
      const res = await this.$axios.post('web/banner/list', {})
      if (res.code == 200) {
        this.bannerList = res.data.filter(e => e.category === 1).map(item => item.picture)
        this.yindaoImages = res.data.filter(e => e.category === 4).map(item => item.picture)
      }
    },
    async getProductInfo () {
      this.infoLoading = true
      const res = await this.$axios.post('web/product/listPage', this.search)
      this.infoLoading = false
      if (res.code == 200) {
        this.productData = res.data.items
        console.log('this.productData', this.productData)
        this.productTotal = res.data.totalItems
      }
    },
    async handleApplyExperience () {
      const user = this.$local.getItem('user') || ''
      if (user) { // 已经登录
        const res = await this.$axios.get(`web/userExperiencer/check/apply/${user.userId}`)
        if (res.code == 200) {
          if (res.data) { // 已经申请过，提示申请理由
            this.$message.warning('You applied!')
          } else { // 没申请跳转到 申请页
            let u = `/experiencer/apply?path=${this.$route.path}`
            if (this.$getParamsStr(this.$route.query)) {
              u += `&${this.$getParamsStr(this.$route.query)}`
            }
            this.$router.push(u)
          }
        }
      } else {
        this.$router.push('/login')
      }
    },
    clickBuy (item) {
      window.open(item.purchaseLink)
    },
    async handleApply (item) {
      const user = this.$local.getItem('user') || ''
      if (user) { // 已经登录
        this.dialogInfo.userId = user.userId
        this.dialogInfo.productId = item.productId
        const res = await this.$axios.get(`web/userExperiencer/check/apply/${user.userId}`)
        if (res.code == 200) {
          if (res.data) { // 已经申请过，提示申请理由
            // this.$message.warning('you applied!')
            this.flag = true
          } else { // 没申请跳转到 申请页
            let u = `/experiencer/apply?path=${this.$route.path}`
            if (this.$getParamsStr(this.$route.query)) {
              u += `&${this.$getParamsStr(this.$route.query)}`
            }
            this.$router.push(u)
          }
        }
      } else {
        this.$router.push('/login')
      }
    },
    productItem (item) {
      this.$router.push(`goodsDetail?productId=${item.productId}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.md-pages-index {
  width: 100%;
  background-color: #fff;
  .md-banner-box {
    width: 100%;
    height: calc(100vh - 66px);
    position: relative;
    .md-banner-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      ::v-deep img {
        width: 100%;
        height: 100%;
      }
      // opacity: 0.05;
      // background: url('@/assets/img/dynamic/home-bg.png') repeat right bottom;
    }
    .md-banner-main {
      width: 1200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .md-banner-label-box {
      margin-left: 100px;
      h1 {
        color: #fff;
        text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
        font-size: 40px;
        line-height: 1.5em;
        display: flex;
        flex-direction: column;
        margin-bottom: 40px;
      }
      h2 {
        color: #fff;
        text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5);
        font-size: 28px;
      }
    }
    .md-banner-pic {
      flex-shrink: 0;
      width: 55vw;
      // height: 550px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .md-introduce-box {
    width: 100%;
    // height: 550px;
    height: 100vh;
    background: #fff;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      cursor: pointer;
      object-fit: cover;
    }
  }
  .md-goods {
    width: 100%;
    // background: #f7f7f7;
    box-sizing: border-box;
    .md-goods-info-list {
      width: 100%;
      .md-goods-info-item {
        width: 100%;
        height: 360px;
        background-color: #f7f7f7;
        cursor: pointer;
        margin-bottom: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        &:last-child {
          margin-bottom: 80px;
        }
        .item-block {
          width: 1200px;
          height: 100%;
          padding: 40px 50px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          .pic {
            width: 373px;
            height: 280px;
            flex-shrink: 0;
            background-color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 30px;
            img {
              width: auto;
              height: auto;
              max-width: 100%;
              max-height: 100%;
            }
          }

          .describe-block {
            flex: 1;
            h4 {
              font-family: SourceHanSansSC, SourceHanSansSC;
              font-weight: 500;
              font-size: 24px;
              color: #1e1f32;
              line-height: 35px;
              @include block-ell(2);
              margin-bottom: 20px;
            }
            .desc {
              font-family: SourceHanSansSC, SourceHanSansSC;
              font-weight: 500;
              font-size: 16px;
              color: #1e1f32;
              line-height: 24px;
              @include block-ell(2);
              margin-bottom: 50px;
            }
            .g-info {
              display: flex;
              align-items: center;
              margin-bottom: 20px;
              li {
                width: 118px;
                height: 40px;
                background: #f0f0f3;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: SourceHanSansSC, SourceHanSansSC;
                font-weight: 500;
                font-size: 16px;
                color: #1e1f32;
                line-height: 24px;
                margin-right: 20px;
              }
            }
            .operate-block {
              display: flex;
              align-items: center;
              .address {
                width: 236px;
                height: 40px;
                background: #ffffff;
                border: 1px solid #070825;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: SourceHanSansSC, SourceHanSansSC;
                font-weight: 400;
                font-size: 16px;
                color: #070825;
                line-height: 24px;
                cursor: pointer;
                margin-right: 15px;
                &:hover {
                  background: #070825;
                  color: #fff;
                }
              }
              .free-trial {
                width: 196px;
                height: 40px;
                background: #070825;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: SourceHanSansSC, SourceHanSansSC;
                font-weight: 400;
                font-size: 16px;
                color: #ffffff;
                line-height: 24px;
                border: 1px solid #070825;
                box-sizing: border-box;
                cursor: pointer;
                &:hover {
                  background: #fff;
                  color: #070825;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
